<template>
    <div class="hotwords-container">
      <el-table :data="pagedPlatforms" style="width: 100%; margin-top: 18px;" border>
        <el-table-column prop="name" label="平台资料" min-width="200" />
        <el-table-column prop="updateTime" label="更新时间" min-width="200" />
        <el-table-column prop="status" label="状态" min-width="100">
          <template #default="scope">
            <span :style="scope.row.status === '上线' ? 'color:#409eff;' : 'color:#aaa;'">{{ scope.row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100">
          <template #default="scope">
            <el-button type="primary" link size="small" @click="openEditDialog(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="hotwords-pagination">
        <el-pagination
          background
          layout="sizes, prev, pager, next, total"
          :total="platformList.length"
          :page-size="pageSize"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          @current-change="handlePageChange"
          @size-change="val => { pageSize = val; currentPage = 1; }"
          style="margin-top: 18px;"
        />
      </div>
      <el-dialog v-model="editDialogVisible" title="编辑平台资料" width="400px">
        <el-form :model="editForm">
          <el-form-item label="平台资料" label-width="80px">
            <el-input v-model="editForm.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="状态" label-width="80px">
            <el-select v-model="editForm.status" placeholder="请选择状态">
              <el-option label="上线" value="上线" />
              <el-option label="下线" value="下线" />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveEdit">保存</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, computed } from 'vue';
  
  const STORAGE_KEY = 'platformList';

  function loadPlatformList() {
    const stored = localStorage.getItem(STORAGE_KEY);
    if (stored) {
      try {
        return JSON.parse(stored);
      } catch {
        return null;
      }
    }
    return null;
  }

  const defaultList = [
    { name: '平台资质', updateTime: '2021-03-02 15:47:44', status: '上线' },
    { name: '关于我们', updateTime: '2021-03-03 10:12:21', status: '上线' },
    { name: '用户协议', updateTime: '2021-03-05 09:30:00', status: '上线' },
    { name: '影视协议', updateTime: '2021-03-06 18:22:11', status: '上线' },
  ];

  const platformList = ref(loadPlatformList() || defaultList);

  function savePlatformList() {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(platformList.value));
  }
  
  const pageSize = ref(5);
  const currentPage = ref(1);
  const pageSizes = [2, 5, 10];
  
  const pagedPlatforms = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    return platformList.value.slice(start, start + pageSize.value);
  });
  
  function handlePageChange(page: number) {
    currentPage.value = page;
  }

  const editDialogVisible = ref(false);
  const editForm = ref({ name: '', status: '' });
  let editIndex = -1;

  function openEditDialog(row: any) {
    editForm.value = { ...row };
    editIndex = platformList.value.findIndex((item: any) => item.name === row.name);
    editDialogVisible.value = true;
  }

  function formatDateTime(date: Date) {
    const pad = (n: number) => n.toString().padStart(2, '0');
    return `${date.getFullYear()}/${pad(date.getMonth() + 1)}/${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
  }

  function saveEdit() {
    if (editIndex !== -1) {
      platformList.value[editIndex] = { ...editForm.value, updateTime: formatDateTime(new Date()) };
      savePlatformList();
    }
    editDialogVisible.value = false;
  }
  </script>
  
  <style scoped>
  .hotwords-container {
    background: #fff;
    padding: 24px 18px 0 18px;
    min-height: 400px;
  }
  .hotwords-pagination {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
  }
  </style>